<template>
   <div>
        <div :ref="componentRef" :style="{height:height+'px'}"></div>
   </div>
</template>
<script>

import * as echarts from 'echarts'

export default {
    name:'ExtLineChar',
    components:{},
    props:{
        componentRef:[String,Number],
        height:{
            type:Number,
            default:200
        },
        option:{
            type:Object,
            default:()=>{}
        },
        xAxisData:String,
        series:[String,Array,Object],
        useCode:{
            type:Boolean,
            default:false
        },
        useOptions:String,
        pageObject:[Object]
       
    },
   
    data(){
        return{
            char:null,
            legendData:[],
            localOptions:{}
        }
    },
    computed:{
       
    },

    created(){
        this.localOptions = this.option
        //将char页面对象给调用的页面，调用的页面就可以操作char页面对象中的方法
        this.pageObject["char"+this.componentRef] = this
    },
    mounted () {
        this.$nextTick(() => {
            if(!this.char){
                this.char = echarts.init(this.$refs[this.componentRef])
            }
            this.initOption()
        })
    },
    methods:{
        getXAxisData(){
            if(this.xAxisData){
                return this.pageObject[this.xAxisData]
            }
            return ['刻度1','刻度2','刻度3','刻度4','刻度5','刻度6']
        },
        getSeries(){
            if(this.series!=undefined && this.series && this.pageObject[this.series]){
                for (let item of this.pageObject[this.series]) {
                    if(item.name){
                        this.legendData.push(item.name)
                    }
                }
                this.legendData = [...new Set(this.legendData)]
                return this.pageObject[this.series]
            }
            
            return []
        },
        initOption(){
            let option = option = {xAxis: {data: []},yAxis: {type: 'value'},series: [{data: [], type: 'line'}]} 
            this.char.setOption(option)
        },
        setOption(){
            let option = {}
            if(this.useCode){
                option = this.pageObject[this.useOptions]
            }else{
                option = {
                    title:{
                        show:this.localOptions.title.show,
                        text:this.localOptions.title.text,
                        textStyle:{
                            color:this.localOptions.title.textStyle.color,
                            fontStyle:this.localOptions.title.textStyle.fontStyle,
                            fontWeight:this.localOptions.title.textStyle.fontWeight,
                            fontSize:this.localOptions.title.textStyle.fontSize
                        }
                    },
                    legend:{
                        show:this.localOptions.legend.show,
                        left:this.localOptions.legend.left+"%",
                        top:this.localOptions.legend.top+"%",
                        right:this.localOptions.legend.right+"%",
                        bottom:this.localOptions.legend.bottom+"%",
                        data:this.legendData
                    },
                    tooltip: {
                        show:this.localOptions.tooltip.show,
                        trigger: "axis",
                        axisPointer: {type:this.localOptions.tooltip.axisPointer.type},
                    },
                    grid: {
                        show:this.localOptions.grid.show,//是否显示网格
                        borderColor:this.localOptions.grid.borderColor,//网格颜色
                        borderWidth:this.localOptions.grid.borderWidth,//网格宽度
                        left: this.localOptions.grid.left+"%",
                        top: this.localOptions.grid.top+"%",
                        right: this.localOptions.grid.right+"%",
                        bottom: this.localOptions.grid.bottom+"%",
                        containLabel:true,//是否防止标签溢出
                    },
                    xAxis: {
                        type: "category",
                        axisLine: {
                            lineStyle: {color: this.localOptions.xAxis.axisLine.lineStyle.color}
                        },
                        splitLine: { "show": false},
                        axisTick: {"show": false},
                        splitArea: { "show": false},
                        data: this.getXAxisData(),
                    },
                    yAxis: [{
                        type: "value",
                        splitLine: {"show": false},
                        axisLine: {lineStyle: {color: this.localOptions.yAxis.axisLine.lineStyle.color}},
                        axisTick: {"show": false},
                        splitArea: {"show": false},

                    }],
                    series:this.getSeries()
                }
            }
            
            this.char.setOption(option || {})
        },
        getOption(){
            return this.localOptions
        }
    }
}
</script>